.app-container{
  background: linear-gradient(180deg, #7B7DF6 0%, rgba(123,125,246,0) 30%);
  //height: 100vh;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  // 用户信息
  .header{
    width: 95%;
    margin: 0 auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    color: #ffffff;
    .head_img{
      width: 4rem;
      height: 4rem;
      margin-right: 0.5rem;
      img{
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
      }
    }
    .names{
      font-size: 1.3rem;
      margin-top: 0.3rem;
      span {
        font-size: 1rem;
        font-weight: 500;
        margin-left: 1rem;
      }
    }
    p {
      font-size: 1rem;
      margin-top: 0.3rem;

    }
  }
  // 工单统计
  .banner{
    width: 94%;
    margin: 0 auto;
    margin-bottom: 1rem;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px 0px rgba(60,62,214,0.2);
    border-radius: 0.8rem;
    .banners{
      padding: 1rem;
      // 导航
      .banner_top{
        display: flex;
        align-items:center;
        :nth-child(1){
          width: 0.2rem;
          height: 1rem;
          background: #7577F6;
          border-radius: 0px 10px 10px 0px;
        }
        :nth-child(2){
          color: #7577F6;
          font-weight: 700;
          font-size: 1rem;
          margin-left: 0.5rem;
        }
        :nth-child(3){
          color: #7577F6;
          font-size: 0.5rem;
          opacity: .5;
        }
      }
      // 工单统计数字
      .banner_num{
        display: flex;
        justify-content:space-around;
        margin-top: 1rem;
        .circle {
          width: 3.5rem;
          height: 3.5rem;
          box-sizing: border-box;
          padding: 1px;
          border-radius: 50%;
          .circle_p {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #fff;
            position: relative;
            .num {
              position: absolute;
              top:50%;
              left: 50%;
              transform: translate(-50%,-50%);
              font-size: 1.7rem;
              font-weight: 700;
            }
          }
        }
        .text {
          font-size: 1rem;
          text-align: center;
        }
      }
      // 工单总数边框渐变
      .circle1 {
        background-image: -webkit-linear-gradient(#ff7926, rgba(255, 121, 38, 0));
        background-image: -moz-linear-gradient(#ff7926, rgba(255, 121, 38, 0));
        background-image: linear-gradient(#ff7926, rgba(255, 121, 38, 0));
      }
      .circle2 {
        background-image: -webkit-linear-gradient(#FF454D, rgba(255, 121, 38, 0));
        background-image: -moz-linear-gradient(#FF454D, rgba(255, 121, 38, 0));
        background-image: linear-gradient(#FF454D, rgba(255, 121, 38, 0));
      }
      .circle3 {
        background-image: -webkit-linear-gradient(#1870FF, rgba(255, 121, 38, 0));
        background-image: -moz-linear-gradient(#1870FF, rgba(255, 121, 38, 0));
        background-image: linear-gradient(#1870FF, rgba(255, 121, 38, 0));
      }
      .circle4 {
        background-image: -webkit-linear-gradient(#81DD47, rgba(255, 121, 38, 0));
        background-image: -moz-linear-gradient(#81DD47, rgba(255, 121, 38, 0));
        background-image: linear-gradient(#81DD47, rgba(255, 121, 38, 0));
      }
    }
  }
  // 内部通知
  .content{
    width: 94%;
    margin: 0 auto;
    background: #FFFFFF;
    box-shadow: 0px 0px 1rem 0px rgba(60,62,214,0.2);
    border-radius: 1rem;
    margin-bottom: 10px;
    .contents {
      padding: 1rem;
      .content_title{
        display: flex;
        justify-content: space-between;
        //  内部通知导航
        .notice{
          display: flex;
          align-items: center;
          :nth-child(1){
            width: 0.2rem;
            height: 1rem;
            background: #7577F6;
            border-radius: 0px 10px 10px 0px;
          }
          :nth-child(2){
            color: #7577F6;
            font-weight: 700;
            font-size: 1rem;
            margin-left: 0.5rem;
          }
        }
        // 更多
        .more {
          display: flex;
          align-items: center;
          :nth-child(1) {
            color: #7577F6;
            font-size: 0.5rem;
            opacity: .5;
          }
          :nth-child(2) {
            width: 1rem;
            height: 1rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      ul {
        margin-left: 1rem;
        font-size: 1rem;
        >li:first-child{
          color: #FF2C2C;
        }
        li{
          list-style: disc;
          margin-top: 0.3rem;
          color: #7D7FF7;
        }
        li::marker {
          color: #7D7FF7;
        }
      }
    }
  }
  // 卡片按钮
  .home-bottom{
    width: 94%;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: space-between;
    >div:nth-child(1){
      background-image: url(../assets/infrared.png);
      background-size: cover;
    }
    >div:nth-child(2){
      background-image: url(../assets/warning.png);
      background-size: cover;
    }
    >div:nth-child(3){
      background-image: url(../assets/warning.png);
      background-size: cover;
    }
    .home-bottom-item{
      flex-shrink: 0;
      box-sizing: border-box;
      width: 48%;
      height: 161px;
      background: #FFFFFF;
      box-shadow: 0px 0px 1rem 0px rgba(60,62,214,0.2);
      border-radius: 15px;
      margin-bottom: 26px;
      padding: 15px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .home-bottom-item-swiper{
        position: relative;
        .top{
          .title{
            font-size: 15px;
            color: #000000;
            font-weight: bold;
            margin-bottom: 5px;
          }
          p{
            display: block;
            color: #8E8E8E;
            font-size: 12px;
            line-height: 16px;
          }
        }
        .bottom1{
          margin-top: 20px;
          color: #6664FB;
          font-size: 29px;
          font-weight: bold;
          .status{
            font-size: 14px
          }
        }
        .batteryIcon {
          position: absolute;
          top: 23px;
          left: 90px;
          // margin: auto;
          // margin-left: 80px;
          width: 45px;
          .batteryIconBody {
            display: block;
            position: relative;
            width: 40px;
            height: 15px;
            border: 3px solid #333;
            border-radius: 1px;
            -webkit-border-radius: 1px;
            -moz-border-radius: 1px;
            .batteryIconHead {
              display: block;
              position: relative;
              height: 8px;
              width: 4px;
              background: #333;
              display: block;
              position: absolute;
              top: 4px;
              left: 41px;
            }
            .batteryIconProgress {
              display: block;
              width: 0;
              height: 15px;
            }
            .batteryIconContent {
              display: block;
              position: relative;
              font-size: 12px;
              left: 10px;
              top: -13px;
            }
          }
        }
      }
    }
  }

  // 底部
  .bottom{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 2rem;
    position: fixed;
    left: 0;
    bottom: 2%;
    // 首页按钮
    :nth-child(1){
      .index{
        width: 2.2rem;
        height: 2rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .index_text {
        width: 100%;
        height: 100%;
        margin-top: 0.2rem;
        text-align: center;
        font-size: 0.5rem;
        color: #7D7FF7;
      }
    }
    // +
    :nth-child(2){
      width: 4rem;
      height: 4rem;
      margin-top: -1rem;
      .plus_outer {
        width: 4rem;
        height: 4rem;
        box-sizing: border-box;
        padding: 1px;
        border-radius: 50%;
        .plus_inner {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: #fff;
          position: relative;
          .plus {
            width: 90%;
            height: 90%;
            border-radius: 50%;
            background: linear-gradient(#7d7ff7, rgba(125, 127, 247, 0.4));
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-47%);
            .add {
              color: #ffffff;
              font-size: 3.5rem;
              position: absolute;
              top:50%;
              left: 50%;
              transform: translate(-50%,-50%);
            }
          }
        }
      }
      // 底部+外圈渐变
      .plus_outer {
        background-image: -webkit-linear-gradient(180deg, #7D7FF7 0%, rgba(123,125,246,0) 40%);
        background-image: -moz-linear-gradient(180deg, #7D7FF7 0%, rgba(123,125,246,0) 40%);
        background-image: linear-gradient(180deg, #7D7FF7 0%, rgba(123,125,246,0) 40%);
      }
    }
    // 消息
    :nth-child(3){
      .new{
        width: 1.8rem;
        height: 2rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .new_text {
        width: 100%;
        height: 100%;
        margin-top: 0.2rem;
        text-align: center;
        font-size: 0.5rem;
        color: #CCCCCC ;
      }

    }
  }
  //底部渐变线
  .bottom {
    border-top: 1px solid;
    border-image: -webkit-linear-gradient(90deg, rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0.6000000238418579), rgba(124.99024987220764, 126.99004456400871, 246.96750462055206, 0), rgba(125.00000014901161, 127.00000002980232, 247.00000047683716, 0), rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0), rgba(125.00000014901161, 127.00000002980232, 247.00000047683716, 0.12123732268810272), rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0.6000000238418579)) 1 1; /* 控制边框颜色渐变 */
    border-image: -moz-linear-gradient(90deg, rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0.6000000238418579), rgba(124.99024987220764, 126.99004456400871, 246.96750462055206, 0), rgba(125.00000014901161, 127.00000002980232, 247.00000047683716, 0), rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0), rgba(125.00000014901161, 127.00000002980232, 247.00000047683716, 0.12123732268810272), rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0.6000000238418579)) 1 1;
    border-image: linear-gradient(90deg, rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0.6000000238418579), rgba(124.99024987220764, 126.99004456400871, 246.96750462055206, 0), rgba(125.00000014901161, 127.00000002980232, 247.00000047683716, 0), rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0), rgba(125.00000014901161, 127.00000002980232, 247.00000047683716, 0.12123732268810272), rgba(125.00315397977829, 127.00299426913261, 246.9929936528206, 0.6000000238418579)) 1 1;
  }

}
